<template>
  <div class="tableConten">
    <div class="itemTitle">作业指导书:</div>
    <div class="tebleDiv">
      <el-button
        class="el-button el-button--primary el-button--mini"
        size="mini"
        v-if="!disabled"
        @click="() => (showBookDialog = true)"
        >关联</el-button
      >
      <div class="bookContent" v-if="showBookList">
        <template v-for="(item, index) in instructionList">
          <div class="line" :key="index">
            <span>{{ item.instructionName }}</span>
            <span class="leftBtn">
              <el-button
                type="text"
                size="mini"
                icon="el-icon-zoom-in"
                @click="getBookFile(item, 'preview')"
                title="预览"
              ></el-button>
              <el-button
                type="text"
                size="mini"
                icon="el-icon-download"
                @click="getBookFile(item, 'download')"
                title="下载"
              ></el-button>
              <el-button
                v-if="!disabled"
                type="text"
                size="mini"
                icon="el-icon-delete"
                @click="deletBook(item)"
                title="删除"
              ></el-button>
            </span>
          </div>
        </template>
      </div>
    </div>
    <dialogPublic
      :title="'指导书'"
      @doSubmit="selectBook"
      @doClose="() => (showBookDialog = false)"
      :show.sync="showBookDialog"
      appendTobody
      fullscreen
    >
      <instructor
        pageType="order"
        ref="bookList"
        :searchData="searchData"
        :selectData="selectData"
        v-if="showBookDialog"
      ></instructor>
    </dialogPublic>
    <dialogPublic
      :title="'文件预览'"
      :show.sync="showPreview"
      appendTobody
      fullscreen
      noFootBtn
      @doClose="() => (showPreview = false)"
    >
      <preview :fileObj="currentAttach" v-if="showPreview"></preview>
    </dialogPublic>
  </div>
</template>
<script>
import instructor from "@/views/standardManagement/workInstructionLibrary/instructionRelatedPage"; /* 指导书 */
import { getAttachList } from "@/api/common";
import { queryInstructionList } from "@/api/standardManagement/workInstructionLibrary.js";
import preview from "@/components/attach/preview";
export default {
  props: {
    //是否可编辑
    disabled: {
      type: Boolean,
      default: false,
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    workBookList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    //工单类型
    orderType: {
      type: String,
      default: null,
    },
  },
  components: { instructor, preview },
  watch: {
    workBookList: {
      handler(val) {
        //  JSON.parse(JSON.stringify(obj))
        // val.map(i => {
        //   i.id = i.instructionId;
        // });
        this.instructionList = val;
      },
      immediate: true,
      deep: true,
    },
  },
  computed: {
    showBookList() {
      let bookLength = this.instructionList || [];
      return bookLength != 0;
    },
    selectData() {
      let data = this.instructionList;
      let list = [];
      data.forEach((i) => {
        list.push(i.instructionId);
      });
      return list;
    },
    searchData() {
      return {
        group: this.orderType,
      };
    },
  },
  data() {
    return {
      showBookDialog: false,
      showPreview: false,
      instructionList: [],
      //文件分类
      typeObj: {
        imge: ["jpg", "jpeg", "gif", "bmp", "png"],
        pdf: ["pdf"],
        video: ["mp4", "m2v", "mkv", "rmvb", "wmv", "avi", "flv", "mov", "m4v"],
        html: ["htm", "html"],
        docx: ["doc", "docx", "docm", "dotx", "dotm"],
        xlsx: ["xls", "xlsx", "xlsm", "xltx", "xltm", "xlsb", "xlam"],
        // txt:["txt"],
        pptx: ["ppt", "pptx", "pot", "potx", "pptm", "ppsx", "ppsm"],
        zip: ["zip", "rar", "7z", "7-zip", "tar", "gzip", "bz2", "jar"],
      },
      //当前预览文件
      currentAttach: {},
    };
  },
  mounted() {
    if (this.workBookList.length == 0) {
      this.getDefautInstruction();
    }
  },
  methods: {
    //选择作业指导书
    selectBook() {
      let data = this.$refs.bookList.getselectData();
      let arr = [];
      data.map((i, index) => {
        let obj = {
          bussinessId: this.formData.id,
          instructionId: i.id,
          instructionName: i.name,
          orderType: "maintain",
          sort: index,
        };
        arr.push(obj);
      });
      this.instructionList = arr;
      this.showBookDialog = false;
    },
    getDefautInstruction() {
      let queryData = {
        page: 1,
        pageSize: 999,
        group: this.orderType,
      };
      queryData.appids = [this.$store.getters.currentAppInfo.appId];
      queryInstructionList(queryData).then((res) => {
        let data = res.data.records;
        this.instructionList = data.map((i, index) => {
          let obj = {
            bussinessId: this.formData.id,
            instructionId: i.id,
            instructionName: i.name,
            orderType: "maintain",
            sort: index,
          };
          return obj;
        });
      });
    },
    //获取作业指导书数据
    getInstructionData() {
      return this.instructionList;
    },
    /* 获取作业指导书 */
    getBookFile(item, type) {
      let form = {
        businessId: item.instructionId,
      };
      getAttachList(form).then((res) => {
        let data = res.data[0];
        if (res.data.length) {
          if (type == "preview") {
            this.preBook(data);
          } else if (type == "download") {
            this.downloadBook(data);
          }
        }
      });
    },
    //预览指导书
    preBook(file) {
      let { extension, path } = file;
      let type = "";
      for (const key in this.typeObj) {
        //循环遍历typeObj
        let arr = this.typeObj[key];
        if (arr.includes(extension)) {
          //比较找到typeObj相应的后缀名，从而判断它属于哪个类型
          type = key;
        }
      }
      if (["imge", "pdf", "video", "html"].includes(type)) {
        this.currentAttach = file;
        this.showPreview = true;
      } else {
        this.$confirm(`该文件暂不支持预览，是否直接下载？`, "提示", {
          confirmButtonText: "立即下载",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.downloadBook(file);
          })
          .catch((e) => {});
      }
      return true;
    },
    //下载指导书
    downloadBook(file) {
      let fileName = file.name;
      this.$utils.downloadFile(file.id, fileName);
    },

    //删除指导书
    deletBook(item) {
      let list = this.instructionList;
      let arr = [];
      list.map((i) => {
        if (i.instructionId != item.instructionId) {
          arr.push(i);
        }
      });
      this.instructionList = arr;
    },
  },
};
</script>

<style lang="less"></style>
